<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import { Page } from '@vben/common-ui';

import { deviceInfo } from '#/api/iot/device/manage';

import AttrinfoCard from './com/attrinfoCard.vue';
import BaseInfoCard from './com/baseInfoCard.vue';

const device = ref(null);
const route = useRoute();

onMounted(() => {
  deviceInfo({
    id: route.params.id,
  }).then((res) => {
    device.value = res;
  });
});
</script>

<template>
  <Page :auto-content-height="true">
    <div class="flex h-full flex-col space-y-4 overflow-scroll" v-if="device">
      <BaseInfoCard :device="device" />
      <div class="flex-1">
        <AttrinfoCard :device="device" />
      </div>
    </div>
  </Page>
</template>

<style lang="scss" scoped>
::-webkit-scrollbar-corner {
  display: none;
}
</style>
